.titleBox{
	display: flex;
	justify-content: space-between;
	margin: 0 0.24rem;
	align-items: center;
	height: 0.88rem;
	.returnBox{
		width: 0.44rem;
		height: 0.44rem;
		background-image: url(../img/myMedal/nav%20bar_icon_back.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.title{
		font-size: 0.32rem;
		color:#1E2023;
	}
	.shareBox{
		width: 0.44rem;
		height: 0.44rem;
		background: url(../img/myMedal/nav%20bar_icon_share.png) no-repeat;
		background-size: cover;
	}
}

.infoBox{
	display: flex;
	align-items: center;
	margin-top: 0.4rem;
	.headImg{
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 50%;
		margin-left: 0.3rem;
	}
	.name{
		font-size: 0.28rem;
		color:#1E2023;
		margin-left: 0.12rem;
	}
	.labelImg{
		width: 1.22rem;
		height: 0.48rem;
		display: block;
		margin-left: 0.08rem;
	}
		
}

.medalBox{
	position: relative;
	border-radius: 0.2rem;
	width: 6.44rem;
	height: 4.4rem;
	margin: 0 auto;
	margin-top: 0.45rem;
	.medalImg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.levelTitle{
		position: absolute;
		width: 1.32rem;
		height: 0.4rem;
		top: 0.26rem;
		left: 0.17rem;
		font-size: 0.2rem;
		color:#fff;
		line-height: 0.4rem;
		border-radius: 0.2rem 0 0.2rem 0;
		opacity: 0.8;
		background: rgba(236, 132, 39, 0.6);
		text-align: center;
	}
	.medalInfo{
		z-index: 100;
		position: absolute;
		top: 1.07rem;
		.label{
			margin-left: 0.44rem;
			font-size: 0.3rem;
			color:#fff;
		}
		.integralBox{
			display: flex;
			font-size: 0.2rem;
			color:#fff;
			margin-top: 0.19rem;
			margin-left: 0.44rem;
		}
		.signBox{
			display: flex;
			font-size: 0.2rem;
			color:#fff;
			margin-top: 0.11rem;
			margin-left: 0.44rem;
		}
		.moreThan{
			display: flex;
			font-size: 0.2rem;
			color:#fff;
			margin-top: 0.11rem;
			margin-left: 0.44rem;
		}
	}
	.levelBar{
		display: flex;
		align-items: center;
		position: absolute;
		left: 0.44rem;
		bottom: 0.66rem;
		z-index: 100;
		.levelLineNor{
			width: 1.8rem;
			height: 0.04rem;
			background-color: #f5f5f5;
			opacity: 0.48;
			margin:0 -0.14rem;
		}
		.levelLineActive{
			background-color: #fff;
			opacity: 1;
		}
		.levelPointNor{
			width: 0.14rem;
			height: 0.14rem;
			border: 0.03rem solid #FFFFFF;
			border-radius: 50%;
			position: level;
		}
		.levelPointNor::after{
			content:'';
			position: absolute;
			width: 0.08rem;
			height: 0.08rem;
			border: 0.03rem solid #FFFFFF;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50% -50%);
			opacity: 0;
		}
		.levelPointActive{
			width: 0.18rem;
			height: 0.18rem;
			background: #FFFFFF;
			border-radius: 50%;
		}
		.levelStart{
			position: absolute;
			font-size: 0.18rem;
			color:#fff;
			top: 0.25rem;
			left: 0;
		}
		.levelEnd{
			position: absolute;
			font-size: 0.18rem;
			color:#fff;
			top: 0.25rem;
			right: 0;
		}
	}
}

.levelRank{
	margin-top: 0.32rem;
	.rankTitleBox{
		display: flex;
		align-items: center;
		margin-left: 0.3rem;
		.line{
			width: 0.08rem;
			height: 0.4rem;
			background: #60A7F6;
			border-radius: 0.04rem;
		}
		.title{
			font-size: 0.32rem;
			color:#1E2023;
			margin-left: 0.08rem;
		}
	}
	.levelRankUl{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0.3rem;
		margin-top: 0.32rem;
		li{
			width: 1.72rem;
			margin-top: 0.16rem;
			.rankText{
				font-size: 0.2rem;
				color:#1E2023;
				text-align: center;
				margin-top: 0.04rem;
			}
			.rankImg{
				margin: 0 auto;
				background-repeat: no-repeat;
				background-size: cover;
				width: 0.56rem;
				height: 0.56rem;
			}
			.birthdayDressActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_birthday%20dress_pre.png);
			}
			.integralWithdrawalActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_integral%20withdrawal_pre.png);
			}
			.doubleIntegralNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_integral%20doubling_nor.png);
			}
			.recommendNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_priority%20recommendation_nor.png);
			}
			.openCircleNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_open%20circles_nor.png);
			}
			.exceptionalNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_reward%20function_nor.png);
			}
			.payReadNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_paid%20reading_nor.png);
			}
			.platformRewardNor{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_platform%20reward_nor.png);
			}
			.doubleIntegralActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_integral%20doubling_pre.png);
			}
			.recommendActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_priority%20recommendation_pre.png);
			}
			.openCircleActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_open%20circles_pre.png);
			}
			.exceptionalActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_reward%20function_pre.png);
			}
			.payReadActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_paid%20reading_pre.png);
			}
			.platformRewardActive{
				background-image: url(../img/myMedal/hierarchical%20equity_icon_platform%20reward_pre.png);
			}
		}
	}
}

.upLevel{
	margin: 0 0.3rem;
	margin-top: 0.52rem;
	.upTitleBox{
		display: flex;
		align-items: center;
		.line{
			width: 0.08rem;
			height: 0.4rem;
			background: #60A7F6;
			border-radius: 0.04rem;
		}
		.title{
			font-size: 0.32rem;
			color:#1E2023;
			margin-left: 0.08rem;
		}
	}
	.upText{
		margin-top: 0.18rem;
		font-size: 0.2rem;
		color: #8A93A1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: clip;
	}
	.inputBox{
		display: flex;
		justify-content: center;
		margin-top: 0.4rem;
		.btn{
			padding: 0.04rem 0.18rem;
			font-size: 0.18rem;
			color:#fff;
			outline: none;
			background: #60A7F6;
			border-radius: 0.18rem;
			border: none;
		}
	}
}

.purposeBox{
	margin: 0 0.3rem;
	margin-top: 0.37rem;
	.purposeTitleBox{
		display: flex;
		align-items: center;
		.line{
			width: 0.08rem;
			height: 0.4rem;
			background: #60A7F6;
			border-radius: 0.04rem;
		}
		.title{
			font-size: 0.32rem;
			color:#1E2023;
			margin-left: 0.08rem;
		}
	}
	.purposeText{
		font-size: 0.2rem;
		color: #8A93A1;
		margin-top: 0.18rem;
	}
}